<template>
    <view class="margin_bottom_80">
        <!--  :scrollTop="scrollTop"
                 type="transparentFixed"
                 transparentFixedFontColor="#FFF" -->
        <view>

            <nav-bar fontColor="#fff"
                     :bgColor="['#63B9F2','#63B9F2']">

            </nav-bar>
            <view class="top_bg u-flex u-row-around">
                <view class="pay_success_text">支付成功</view>
                <image class="pay_success_img"
                       src="/static/images/ddxq_icon_successful@2x.png"
                       mode="" />
            </view>
            <view class="top_card">
                <view class="container_box u-flex-col ">
                    <view class="title">已报课程</view>
                    <view class="u-flex">
                        <image class="order_img"
                               :src="orderData.img"
                               mode="" />
                        <view class="right_box">
                            <view class="order_title">{{ orderData.title }}</view>
                            <view class="order_tuition">课程：{{ orderData.tuition }}</view>
                            <view class="u-flex u-row-between">
                                <view class="order_material">材料费：{{ orderData.material }}</view>
                                <view class="u-flex">
                                    <span>实付款：</span>
                                    <span class="price_number">{{ orderData.tuition + orderData.material }}</span>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="container_box">
                    <view class="title">已报本课程学生
                        <span class="student_total">({{ orderData.number }})人</span>
                    </view>
                    <view class="student_box u-flex u-flex-wrap">
                        <view class="student_item"
                              :class="{'no_margin_right': index!=0 && index%4 == 0}"
                              v-for="(item,index) in studentList"
                              :key="index">
                            <image class="student_icon"
                                   src="https://bsm-sdn.oss-cn-shenzhen.aliyuncs.com/ossa045b8a2-0470-995a-ac5e-20057a2049ac.png"
                                   mode="" />
                            <view class="student_name">{{ '张三' }}</view>
                            <view class="student_class">{{ '一年一班' }}</view>
                        </view>
                    </view>
                </view>
                <view class="images_box">
                    <image src="/static/images/ddxq_pic_banner@2x.png"
                           mode="" />
                    <button class="share_btn"
                            type="default"
                            open-type="share">去分享</button>
                    <view class="surplus_number">剩余名额：{{ orderData.total - orderData.number }}</view>
                </view>
            </view>
        </view>
        <view style="height: 1px;"></view>
        <view class="footer_box safe-area-inset-bottom">
            <u-button @click="orderPay"
                      type="primary"
                      :custom-style="customStyle"
                      :ripple="true"
                      shape="circle"> 返回了解课程 </u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            scrollTop: 0,
            customStyle: {
                height: '80rpx',
                background: '#63B9F2',
                borderRadius: '40rpx',
            },
            studentList: [
                { id: '1', name: '张三', class: '一年一班' }, { id: '1', name: '张三', class: '一年一班' }, { id: '1', name: '张三', class: '一年一班' }, { id: '1', name: '张三', class: '一年一班' },
                { id: '1', name: '张三', class: '一年一班' }, { id: '1', name: '张三', class: '一年一班' }, { id: '1', name: '张三', class: '一年一班' }, { id: '1', name: '张三', class: '一年一班' },
                { id: '1', name: '张三', class: '一年一班' },
            ],
            orderData: {
                title: '跆拳道',
                grade: '2年级',
                img: 'https://bsm-sdn.oss-cn-shenzhen.aliyuncs.com/ossa045b8a2-0470-995a-ac5e-20057a2049ac.png',
                classBeginTime: '16:30',
                classEndTime: '18:00',
                number: 30,
                total: 38,
                tuition: 900,
                material: 150,
                materialDetails: '跆拳道服1件',
                synopsis: `跆拳道训练中严格的礼仪会使孩子受到良好的熏陶和潜移默化的教育,培养孩子勤奋、认真、刻苦、礼貌的品德。跆拳道坚强不屈的精神能激发孩子的信心、勇气与斗志,培养勇敢、坚强的个性和乐观、自信、开朗的性格,使其免受社会不良风气的影响,成为一名身心健康的青少年。`,
                target: `基础班：（适合低年级）
            1.基本功和各项身体素质练习，着重培养兴趣爱好，提高整体协调性、灵敏性
            2.改善个人气质，提升精气神
            3.基本功、基本步型、腿法练习等
            4.学习基本拳法，腿法的应用`,
                highlights: '以兴趣为引导，实地训练各项基本内容，着重开发孩子的协调性、灵敏性和记忆能力，辅以基本技术理论的教学形式。',
                desc: '暂无'
            },
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    // 小程序自定义分享
    onShareAppMessage(res) {
        var _this = this;
        console.log("_this.userInfo.id")
        // var cid = uni.getStorageSync("campusId") ? uni.getStorageSync("campusId") : 1
        return {
            title: `${this.orderData.title}名额剩余${this.orderData.total - this.orderData.number}名，快来跟我一起学吧~`,
            path: 'pages/index/index?inviteCode',
            imageUrl: "/static/images/ddxq_pic_banner@2x.png",
        }

    },
    methods: {
        orderPay() {
            let data = {
                appId: "",
                goods: [
                    {
                        childId: 0,
                        classSchduleId: 0,
                        quantity: 0,
                        skuId: 0
                    }
                ],
                notes: "",
                payWay: 201,
            }
            this.$api.submitPayOrder(data, res => {
                if (res.code == 0) {
                    uni.requestPayment({
                        timeStamp: res.data.wxMpPayInfo.timeStamp + '',
                        nonceStr: res.data.wxMpPayInfo.nonceStr,
                        package: res.data.wxMpPayInfo.packageValue,
                        paySign: res.data.wxMpPayInfo.paySign,
                        signType: res.data.wxMpPayInfo.signType,
                        success(res) {
                            console.log('>>>>>>>>>>>>>>>>>>>', res)
                            _this.$interactive.toast('支付成功')
                        },
                        fail(res) {
                            if (res.errMsg !== 'requestPayment:fail cancel') {
                                _this.$interactive.toast('微信支付失败，请联系客服处理')
                            }
                            console.error('支付失败', res)
                        },
                        complete(res) {
                            console.error('支付完成', res)
                        }
                    })
                }
            });
            // let _this = this
            // if (this.rechargeNum < 1) {
            //     return _this.$interactive.toast('充值金额需大于1')
            // }
            // let payData = {
            //     token: uni.getStorageSync('userInfo').token,
            //     amount: this.rechargeNum,
            // }
            // this.$api.wxpay(payData, res => {

            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.padding_box {
    padding: 30rpx;
}
.container_box {
    padding: 30rpx;
    border-radius: 32rpx;
    background-color: #fff;
}
.container_box + .container_box {
    margin-top: 15rpx;
}
.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
}
.order_img {
    width: 140rpx;
    height: 140rpx;
    margin-right: 40rpx;
}
.right_box {
    width: 100%;
}
.order_title {
    margin-bottom: 30rpx;
    color: #333;
    font-weight: bold;
}
.order_tuition,
.order_material {
    color: #999;
    font-size: 24rpx;
    font-weight: 500;
}
.price_number {
    color: #eb4b4b;
    font-size: 36rpx;
    .price {
        font-size: 48rpx;
        font-weight: bold;
        margin: 20rpx 10rpx 20rpx 0;
    }
}
.top_bg {
    height: 200rpx;
    background: #63b9f2;
    .pay_success_text {
        font-size: 48rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 50rpx;
    }
    .pay_success_img {
        width: 160rpx;
        height: 160rpx;
    }
}
.top_card {
    padding: 30rpx;
    position: relative;
    top: -100rpx;
}
.student_box {
    .student_item {
        margin: 30rpx 36rpx 0 0;
        color: #333;
        text-align: center;
        &.no_margin_right {
            margin-right: 0;
        }
        .student_icon {
            width: 96rpx;
            height: 96rpx;
            border-radius: 100%;
        }
        .student_name {
            font-size: 24rpx;
            font-weight: bold;
        }
        .student_class {
            font-size: 20rpx;
        }
    }
}
.images_box {
    width: 100%;
    height: 154rpx;
    margin-top: 15rpx;
    position: relative;
    image {
        width: 100%;
        height: 100%;
    }
    .surplus_number {
        font-size: 28rpx;
        color: #fff;
        position: absolute;
        bottom: 24rpx;
        left: 48rpx;
    }
}
.share_btn {
    width: 100%;
    height: 154rpx;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
}
.margin_bottom_80 {
    margin-bottom: 50rpx;
}
.student_total {
    color: #999;
    font-weight: 500;
}
</style>
